<template>
    <div>
        <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <i class="el-icon-arrow-left" @click="goback">返回上一级</i>
        </div>
        <el-card class="form-container" shadow="never">
            <el-steps :active="active" finish-status="success" align-center>
                <el-step title="修改商品信息"></el-step>
                <el-step title="修改商品属性"></el-step>
                <el-step title="修改商品图片"></el-step>
            </el-steps>
            <product-update-info
                    v-show="showStatus[0]"
                    v-model="productParam"
                    @nextStep="nextStep">

            </product-update-info>

            <product-update-attr
                    v-show="showStatus[1]"
                    v-model="productParam"
                    @nextStep="nextStep"
                    @prevStep="prevStep" >

            </product-update-attr>
            <product-update-image
                    v-show="showStatus[2]"
                    v-model="productParam"
                    @finishCommit="finishCommit"
                    @prevStep="prevStep">
            </product-update-image>
        </el-card>
    </div>
</template>

<script>
    import ProductUpdateImage from './ProductUpdateImage';
    import ProductUpdateInfo from "./ProductUpdateInfo";
    import ProductUpdateAttr from "./ProductUpdateAttr";

    export default {
        name: "ProductUpdate",
        components: {ProductUpdateAttr, ProductUpdateInfo,ProductUpdateImage},

        data(){
            return{
                productId:'',
                product:null,
                active: 0,
                showStatus: [true, false, false],
                productParam:{
                    productId:this.$route.params.productId,
                    categoryId:'',
                    name:'',
                    subtitle:'',
                    mainImage:'',
                    price:'',
                    stock:'',
                    status:2,
                    isNew:'',
                    newStatus:'',
                    //isHot:'',
                    //isBanner:'',
                    subImages:'',
                    detail:'',
                    brandId:'',
                    spu:'',
                    specificationItems:'',
                    defaultItemId:'',
                    packageList:'',//商品原价
                    saleService:'',//参加积分兑换
                },
            }
        },
        created(){
          this.productId = this.$route.params.productId;
          this.getProductInfo();

        },
        methods:{

            getProductInfo(){
            this.service.get("/product/manage/product/detail.do",{
                params:{
                    productId:this.productId
                }
            }).then(res=>{
                console.log(res);
                if (res.data.status == 0){
                    this.productParam.name = res.data.data.name;
                    this.productParam.subtitle = res.data.data.subtitle;
                    this.productParam.price =res.data.data.price;
                    this.productParam.stock = res.data.data.stock;
                    this.productParam.newStatus = res.data.data.new;
                    this.productParam.detail  = res.data.data.detail;
                    this.productParam.packageList = res.data.data.packageList;
                    this.productParam.saleService = res.data.data.saleService;
                    this.productParam.spu = res.data.data.spu;
                }
            })
            },
            hideAll() {
                for (let i = 0; i < this.showStatus.length; i++) {
                    this.showStatus[i] = false;
                }
            },
            nextStep() {
                if (this.active < this.showStatus.length - 1) {
                    this.active++;
                    this.hideAll();
                    this.showStatus[this.active] = true;
                }
            },
            prevStep() {
                if (this.active > 0 && this.active < this.showStatus.length) {
                    this.active--;
                    this.hideAll();
                    this.showStatus[this.active] = true;
                }
            },
            finishCommit(){
                this.$confirm('是否要提交该产品', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.service.get("/product/manage/product/save.do",{
                        params:{
                            id:this.productId,
                            categoryId:this.productParam.categoryId,
                            name:this.productParam.name,
                            subtitle:this.productParam.subtitle,
                            mainImage:this.productParam.mainImage,
                            price:this.productParam.price,
                            stock:this.productParam.stock,
                            isNew:this.productParam.isNew,
                            subImages:this.productParam.subImages,
                            detail:this.productParam.detail,
                        }
                    }).then(res=>{
                        if (res.data.status == 0){
                            this.service.get("/product/manage/productSubTab/set.do",{
                                params:{
                                    productId:this.productId,
                                    sellerId:this.productParam.sellerId,
                                    brandId:this.productParam.brandId,
                                    spu:this.productParam.spu,
                                    specificationItems:this.productParam.specificationItems,
                                    defaultItemId:this.productParam.defaultItemId,
                                    typeTemplateId:this.productParam.typeTemplateId,
                                    packageList:this.productParam.packageList,//商品原价
                                    saleService:this.productParam.saleService,//参加积分兑换
                                }
                            }).then(resp=>{
                                if (resp.data.status ==0){
                                    this.$router.push(
                                        {
                                            name:'商品列表'
                                        });
                                }else{
                                    this.$message.error('商品副表更新错误');
                                }
                            })
                        }else{
                            this.$message.error('商品主表更新错误');
                        }
                    })

                })
            },
            goback(){
                this.$router.go(-1);
            },
            },



    }
</script>

<style scoped>
    .form-container {
        width: 800px;
    }
</style>